<p>This rule raises an issue when the <code>inputs</code> metadata property is used in <code>@Component</code> or <code>@Directive</code>
decorators.</p>
<h2>Why is this an issue?</h2>
<p>Using the <code>inputs</code> metadata property makes code harder to read and maintain. The metadata approach lacks type safety and IDE support
compared to using <code>@Input()</code> decorators directly on class properties.</p>
<p>The <code>@Input()</code> decorator approach provides better:</p>
<ul>
  <li> Type checking and IntelliSense support </li>
  <li> Code readability by keeping input definitions close to their properties </li>
  <li> Refactoring capabilities in modern IDEs </li>
  <li> Alignment with Angular’s recommended coding style </li>
</ul>
<h3>What is the potential impact?</h3>
<p>Using the metadata approach reduces code maintainability and developer productivity. It makes the codebase harder to understand and refactor,
especially in larger applications.</p>
<h3>How to fix?</h3>
<p>Replace the <code>inputs</code> metadata property with <code>@Input()</code> decorators on class properties. This provides better type safety and
follows Angular’s style guide recommendations.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
@Component({
  inputs: ['name', 'id: userId'], // Noncompliant
  selector: 'app-user'
})
class UserComponent {
  name: string;
  userId: string;
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
@Component({
  selector: 'app-user'
})
class UserComponent {
  @Input() name: string;
  @Input('userId') id: string;
}
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/angular-eslint/angular-eslint">Angular ESLint</a> - Rule <a
  href="https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/docs/rules/no-inputs-metadata-property.md">no-inputs-metadata-property</a> </li>
  <li> Angular Style Guide - Input and Output Properties - <a href="https://angular.dev/style-guide#style-05-12">Official Angular style guide
  recommendation against using inputs metadata property</a> </li>
  <li> Angular Input Decorator - <a href="https://angular.dev/api/core/Input">Documentation for the @Input() decorator</a> </li>
</ul>
